<template>
    <div>
        <el-table :data="dataList">
            <el-table-column v-for="(v, i) in columns" :width="v.width" align="center" :label="v.label"
                :formatter="v.formatter" :key="i" show-overflow-tooltip>
                <template #default="{ row }">
                    <div :class="{ 'text-red': row[v.prop]?.isRed  }">
                        {{ v.func ? v.func(row[v.prop]) : getVal(row[v.prop]) }}{{ v.unit||'' }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
const props = defineProps({
    columns: { type: Array, default: [] },
    dataList: { type: Array, default: [] },
})

function getVal(val) {
    if (val && typeof val == 'object') {
        return val.value
    }
    return val
}
</script>

<style lang="scss" scoped>
.text-red {
    color: red;
}
</style>